<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{height:100%;}
        .cont{width:90%;height:90%;background: #000;margin: 0 auto;cursor: pointer;position: relative;}

        .fire{width:8px;height:16px;position: absolute;}

        .s_fire{width:8px;height:8px;border-radius:50%;position: absolute;}
    </style>
</head>
<body>
    <div class="cont"></div>
</body>
<script src="../move.js"></script>
<script>
    class Fire{
        constructor(ops){
            this.type = ops.type;
            this.start = ops.start;
            this.target = ops.target;
            this.className = ops.className;
            this.cont = document.querySelector(".cont")
            this.createEle()
        }
        createEle(){
            this.ele = document.createElement("div");
            this.cont.appendChild(this.ele);
            this.ele.className = this.className;
            this.ele.style.background = randomColor();
            this.ele.style.left = this.start.x + "px";
            this.ele.style.top = this.start.y + "px";
            this.move()
        }
        move(){
            move(this.ele, {
                left: this.target.x,
                top: this.target.y
            }, ()=>{
                this.over()
            });
        }
        over(){
            this.ele.remove()
            if(this.type === 0){
                const num = random(10,20);
                const r = random(100, 200);
                for(let i=0;i<num;i++){
                    // 计算每个点，在圆上的角度
                    const deg = 360 / num * i;
                    // 计算圆上某个点的距离的坐标
                    // 作为小烟花运动的终点
                    const x = parseInt(Math.cos( Math.PI/180*deg ) * r + this.target.x);
                    const y = parseInt(Math.sin( Math.PI/180*deg ) * r + this.target.y);
                    new Fire({
                        type:1,
                        start:{
                            x: this.target.x,
                            y: this.target.y
                        },
                        target:{
                            x, y
                        },
                        className:"s_fire"
                    })
                }
            }
        }
    }

    const cont = document.querySelector(".cont");
    cont.onclick = function(eve){
        const e = eve || window.event;
        new Fire({
            type:0,
            start:{
                x:e.offsetX, y:cont.offsetHeight - 16
            },
            target:{
                x:e.offsetX, y:e.offsetY
            },
            className:"fire"
        });
    }
    

    function random(max,min){
        return Math.round(Math.random()*(max-min)+min)
    }
    function randomColor(){
        return `rgb(${random(200,255)},${random(100,255)},${random(100,255)})`;
    }
</script>
</html>

